<template>
  <div class="matlab-bar clearfix">
    <div class="block file">
      <div class="top dis-flex">
        <div
          v-if="$store.state.matlab.breadcrumb.length"
          class="column"
          @click="menuClick('buildFile')"
        >
          <div class="matlab-icon2 icon-script icon-style" />
          <div>新建<br>脚本</div>
        </div>
        <div
          class="column pos-rel"
          :class="{ active: activeBtn === 'menuBuild' }"
        >
          <div id="menuBuildF" @click="build">
            <div class="matlab-icon icon-new icon-style" />
            <div>新建</div>
            <i class="el-icon-caret-bottom" />
          </div>
          <menu-list
            ref="menuBuild"
            class="menu-position"
            :menu-list="
              $store.state.matlab.breadcrumb.length > 0
                ? menuList
                : menuRootList
            "
            :callback="menuClick"
          />
        </div>
        <div
          class="column pos-rel"
          :class="{ active: activeBtn === 'menuOpen' }"
        >
          <div id="menuOpenF" @click="open">
            <div class="matlab-icon icon-open-file icon-style" />
            <div>打开</div>
            <i class="el-icon-caret-bottom" />
          </div>
          <open-menu ref="menuOpen" class="menu-position" />
        </div>
        <div class="pt-10">
          <div
            class="row clearfix"
            :class="{ blurry: !$store.state.matlab.uploadNode }"
            @click="openUpload"
          >
            <div class="fl matlab-icon2 icon-upload icon-style-small" />
            <span class="fl">&nbsp;上传</span>
          </div>
          <div
            class="row clearfix"
            :class="{ blurry: !$store.state.matlab.downloadFile }"
            @click="downloadFile"
          >
            <div class="fl matlab-icon2 icon-download icon-style-small" />
            <span class="fl">&nbsp;下载</span>
          </div>
        </div>
        <div class="pt-10">
          <div class="row clearfix" @click="searchFile">
            <div class="fl matlab-icon2 icon-go-to icon-style-small" />
            <span class="fl">&nbsp;转至文件</span>
          </div>
          <!--
          <div class="row clearfix" @click="todo">
            <div class="fl matlab-icon2 icon-find-file icon-style-small"></div>
            <span class="fl">&nbsp;查找文件</span>
          </div>
          -->
        </div>
      </div>
      <div class="desc">文件</div>
      <div class="right-line" />
    </div>
    <div class="block variable">
      <div class="top dis-flex">
        <!-- <div class="column" @click="todo">
          <div class="matlab-icon2 icon-import icon-style"></div>
          <div>导入数据</div>
        </div> -->
        <div class="column" @click="saveVariable">
          <div class="icon-save-workspace icon-style" />
          <div>保存<br>工作区</div>
        </div>
        <div class="pos-rel">
          <!-- <div class="row clearfix" @click="todo">
            <div class="fl icon-new-variable icon-style-small"></div>
            <span class="fl">&nbsp;新建变量&nbsp;</span>
          </div> -->
          <div
            id="menuVariableF"
            class="row clearfix"
            :class="{ active: activeBtn === 'menuVariable' }"
            @click="openVariableList"
          >
            <div class="fl icon-edit-variable icon-style-small" />
            <span class="fl">&nbsp;打开变量&nbsp;</span>
            <i class="fl el-icon-caret-bottom" />
          </div>
          <variable-list
            ref="menuVariable"
            class="menu-variable-position"
            :variable-list="this.$store.getters['matlab/getProcessedVariables']"
          />
          <div class="row clearfix" @click="clearWorkspace">
            <div
              class="fl matlab-icon2 icon-clear-variable icon-style-small"
            />
            <span class="fl">&nbsp;清空 工作区&nbsp;</span>
          </div>
        </div>
      </div>
      <div class="desc">变量</div>
      <div class="right-line" />
    </div>
    <!--
    <div class="block code">
      <div class="top dis-flex">
        <div class="column" @click="todo">
          <div class="matlab-icon3 icon-favorites icon-style"></div>
          <div>收藏夹</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div class="column" @click="todo">
          <div class="matlab-icon2 icon-clear-command icon-style"></div>
          <div>清除命令</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
      </div>
      <div class="desc">代码</div>
      <div class="right-line"></div>
    </div>
    <div class="block simulink">
      <div class="top dis-flex">
        <div class="column" @click="todo">
          <div class="icon-simulink icon-style"></div>
          <div>Simulink 库<br />&nbsp;</div>
        </div>
      </div>
      <div class="desc">SIMULINK</div>
      <div class="right-line"></div>
    </div>
    <div class="block environment">
      <div class="top dis-flex">
        <div class="column" @click="todo">
          <div class="matlab-icon2 icon-layout icon-style"></div>
          <div>布局</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
        <div class="pt-10">
          <div class="row clearfix" @click="todo">
            <div class="fl matlab-icon icon-preset icon-style-small"></div>
            <span class="fl">&nbsp;预设项</span>
          </div>
          <div class="row clearfix" @click="todo">
            <div class="fl icon-parallel icon-style-small"></div>
            <span class="fl">&nbsp;Parallel&nbsp;</span>
            <i class="fl el-icon-caret-bottom"></i>
          </div>
        </div>
        <div class="column" @click="todo">
          <div class="icon-add-on icon-style"></div>
          <div>附加功能</div>
          <i class="el-icon-caret-bottom"></i>
        </div>
      </div>
      <div class="desc">环境</div>
      <div class="right-line"></div>
    </div>
    -->
    <div class="block resources">
      <div class="top dis-flex">
        <div class="pos-rel">
          <div
            id="menuHelpF"
            class="column"
            :class="{ active: activeBtn === 'menuHelp' }"
            @click="openHelp"
          >
            <div class="matlab-icon icon-help icon-style" />
            <div>帮助</div>
            <i class="el-icon-caret-bottom" />
          </div>
        </div>
        <menu-help ref="menuHelp" class="menu-position" />
        <div class="row clearfix" onclick="window.open('https://gitee.com/pang-gu/tianyan-feedback/issues')">
          <div class="fl matlab-icon2 icon-feedback icon-style-small" />
          <span class="fl">&nbsp;反馈</span>
        </div>
      </div>
      <div class="desc">资源</div>
      <div class="right-line" />
    </div>
    <!--
    <div class="block dependency">
      <div class="top dis-flex">
        <div class="column" @click="saveVariable">
          <div class="icon-save-workspace icon-style"></div>
          <div>添加依赖</div>
        </div>
      </div>
      <div class="desc">依赖</div>
      <div class="right-line"></div>
    </div>
    -->
    <file-upload-dialog ref="fileUploadDialog" />
  </div>
</template>

<script>
import OpenMenu from '../dropdown-menu/OpenMenu.vue';
import MenuList from '../dropdown-menu/MenuList.vue';
import MenuHelp from '../dropdown-menu/MenuHelp.vue';
import VariableList from '../dropdown-menu/VariableList.vue';
import { saveWorkspace } from '@/utils/variable';
import FileUploadDialog from '../dialog/FileUploadDialog.vue';
export default {
  components: {
    MenuList,
    OpenMenu,
    VariableList,
    FileUploadDialog,
    MenuHelp
  },
  data() {
    return {
      activeBtn: '',
      wikiUrl: process.env.BASE_URL + '/wiki/',
      menuList: [
        {
          style: 'item',
          type: 'buildFile',
          icon: 'icon-build-script',
          title: '脚本'
        },
        /** {
          style: 'item',
          type: 'buildFunction',
          icon: 'icon-build-function',
          title: '函数'
        },
        {
          style: 'item',
          type: 'buildClass',
          icon: 'icon-build-class',
          title: '类'
        },
        { style: 'divider' },
        /{
          style: 'item',
          type: 'buildExample',
          icon: 'icon-build-example',
          title: '图窗'
        },*/
        { style: 'divider' },
        {
          style: 'item',
          type: 'buildFolder',
          icon: 'icon-build-fold',
          title: '文件夹'
        }
      ],
      menuRootList: [
        {
          style: 'item',
          type: 'buildRootFolder',
          icon: 'icon-build-fold',
          title: '工程'
        }
      ]
    };
  },
  inject: ['searchFiles'],
  methods: {
    // 新建按钮
    build() {
      setTimeout(() => {
        this.activeBtn = 'menuBuild';
        this.$refs.menuBuild.show();
        document.body.addEventListener('click', this.menuClose);
      }, 200);
    },
    // 打开按钮
    open() {
      setTimeout(() => {
        this.activeBtn = 'menuOpen';
        this.$refs.menuOpen.show();
        document.body.addEventListener('click', this.menuClose);
      }, 200);
    },
    // 打开变量
    openVariableList() {
      setTimeout(() => {
        this.activeBtn = 'menuVariable';
        this.$refs.menuVariable.show();
        document.body.addEventListener('click', this.menuClose);
      }, 100);
    },
    // 打开帮助
    openHelp() {
      setTimeout(() => {
        this.activeBtn = 'menuHelp';
        this.$refs.menuHelp.show();
        document.body.addEventListener('click', this.menuClose);
      }, 100);
    },
    // 点击其他位置关闭菜单
    menuClose(e) {
      var sp = document.getElementById(this.activeBtn + 'F');
      if (sp) {
        if (!sp.contains(e.target)) {
          try {
            this.$refs[this.activeBtn].hide();
            this.activeBtn = '';
            document.body.removeEventListener('click', this.menuClose);
          } catch (e) {
            document.body.removeEventListener('click', this.menuClose);
          }
        }
      }
    },
    // 菜单事件
    menuClick(type) {
      // console.log(type);
      switch (type) {
        case 'buildRootFolder':
        case 'buildFolder':
        case 'buildFile':
          this.$store.commit('matlab/append', { nodeType: 'father', type });
          break;
        default:
          this.$message.info('二期开发');
          break;
      }
    },
    // 下载文件
    downloadFile() {
      this.$store.dispatch('matlab/downloadFile');
    },
    // 转至文件
    searchFile() {
      this.searchFiles();
    },
    todo() {
      this.$message.info('二期开发');
    },
    clearWorkspace() {
      this.$confirm('确认清空工作区?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.commit('matlab/clearVariables');
      }).catch((err) => {
        console.error(err);
      });
    },
    saveVariable() {
      saveWorkspace(this.$store.state.matlab.variableArray);
    },
    openUpload() {
      if (this.$store.state.matlab.uploadNode) {
        this.$refs.fileUploadDialog.show();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.menu-position {
  position: absolute;
  top: 69px;
  left: 0;
}
.menu-variable-position {
  position: absolute;
  top: 23px;
  left: 0;
}
</style>
